.ais-search-box {
  display: inline-block;
  position: relative;
  height: 46px;
  white-space: nowrap;
  font-size: 14px;


  &--input {
    appearance: none;
    font: inherit;
    background: $white;
    color: $black;
    display: inline-block;
    border: 1px solid #D4D8E3;
    border-radius: $border-radius;
    box-shadow: 0 1px 1px 0 rgba(85, 95, 110, 0.2);
    transition: box-shadow .4s ease, background .4s ease;
    padding: 10px 10px 10px 35px;
    vertical-align: middle;
    white-space: normal;
    height: 100%;
    width: 100%;

    &:focus {
      box-shadow: none;
      outline: 0;
    }
  }

  &--reset {
    fill: #BFC7D8;
    top: calc(50% - 12px / 2);
    right: 13px;
  }

  &--magnifier {
    fill: #BFC7D8;
    left: 12px;
    top: calc(50% - 18px / 2);

    svg {
      height: 18px;
      width: 18px;
    }
  }

  &--loading-indicator-wrapper {
    fill: #BFC7D8;
    left: 12px;
    top: calc(50% - 18px / 2);

    svg {
      height: 18px;
      width: 18px;
    }
  }
}
